<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌列表</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="margin: 15px;padding:15px;background-color: #fff;">

        <div class="layui-form">
            <div class="layui-inline" style="float: right;">
                <div class="layui-input-inline">
                    <input type="text" name="search" value="{$search}" placeholder="品牌名称" class="layui-input"
                        style="height: 30px;">
                </div>
                <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="search"><i
                        class="layui-icon layui-icon-search"></i></button>
            </div>

            <div class="layui-inline">
                <div class="layui-btn-group">
                    <button class="layui-btn layui-btn-sm" onclick="delAll()">批量删除</button>
                    <button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
                    <button class="layui-btn layui-btn-sm" onclick="window.location.reload()"><i
                            class="layui-icon layui-icon-refresh"></i></button>
                </div>
            </div>
        </div>

        <table class="layui-table layui-form">
            <thead>
                <tr>
                    <th style="width: 30px;"><input type="checkbox" value="1" lay-filter="filter-chkAll"
                            lay-skin="primary"></th>
                    <th>ID</th>
                    <th>所属类目</th>
                    <th>品牌名称</th>
                    <th>品牌Logo</th>
                    <th>品牌描述</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                {if $items}
                {foreach $items as $item}
                <tr>
                    <td><input type="checkbox" value="{$item['id']}" lay-filter="filter-chk" lay-skin="primary"></td>
                    <td>{$item['id']}</td>
                    <td>{$item['cate']}</td>
                    <td>{$item['title']}</td>
                    <td>{$item['logo']|raw}</td>
                    <td>{$item['descs']}</td>
                    <td>
                        <button class="layui-btn layui-btn-xs" onclick="edit({$item['id']})">编辑</button>
                        <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del({$item['id']})">删除</button>
                    </td>
                </tr>
                {/foreach}
                {else /}
                <tr>
                    <td colspan="8" style="text-align: center;">暂无记录</td>
                </tr>
                {/if}
            </tbody>
        </table>

        <div id="pages"></div>
    </div>

    <script>
        layui.use(['form', 'laypage'], function () {
            var form = layui.form,
                laypage = layui.laypage,
                $ = layui.jquery;

            // 搜索
            form.on('submit(search)', function (obj) {
                var data = obj.field;
                window.location.href = '?search=' + data.search;
            })

            // 全选全不选
            form.on('checkbox(filter-chkAll)', function (obj) {
                $('input[lay-filter="filter-chk"]').prop('checked', obj.elem.checked);
                form.render('checkbox');
            });
            form.on('checkbox(filter-chk)', function (obj) {
                $('input[lay-filter="filter-chkAll"]').prop('checked', [...$('input[lay-filter="filter-chk"]')].every(item => item.checked));
                form.render('checkbox');
            });

            // 分页
            laypage.render({
                elem: 'pages',
                count: '{$total}',
                limit: '{$pageSize}',
                curr: '{$page}',
                layout: ['prev', 'page', 'next', 'limit'],
                jump: function (obj, first) {
                    if (!first) {
                        window.location.href = '?page=' + obj.curr + '&limit=' + obj.limit;
                    }
                }
            });
        });

        var $ = layui.jquery;
        // 添加品牌
        function add() {
            layer.open({
                title: '添加品牌',
                type: 2,
                maxmin: true,
                area: ['790px', '450px'],
                content: '/admins/products/add_brands'
            });
        }

        // 修改品牌
        function edit(id) {
            layer.open({
                title: '修改品牌',
                type: 2,
                maxmin: true,
                area: ['790px', '450px'],
                content: '/admins/products/edit_brands?id=' + id
            });
        }

        // 删除品牌
        function del(id) {
            layer.confirm('确定删除品牌吗？', { icon: 3 }, function () {
                $.post('/admins/products/delete_brands', { id }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                }, 'json')
            });
        }

        // 批量删除
        function delAll() {
            var id = [];
            $chkItems = $('input[lay-filter="filter-chk"]:checked').each((i, item) => id.push(item.value));
            if (!id.length) return layer.msg('请选择数据', { icon: 2 });
            del(id);
        }
    </script>
</body>

</html>